<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    /* 常见的伪类
    1.动态伪类(dynamic pseudo-classes)
    口 :link、 :visited、:hover、 :active、 :focus
    2.目标伪类(target pseudo-classes)
    口 :target
    3.语言类(language pseudo-classes)
    口 :lang()
    4.元素状态伪类(Ul element states pseudo-classes)
    口 :enabled、:disabled、:checked
    5.结构伪类(structural pseudoclasses)(后续学习)
    口 :nth-child()、:nth-last-child( )、:nth-of-type( )、:nth-lastof-type( )
       :first-child、:last-child、:first-of-type、 :last-of-type :root、:only-child、:only-of-type、 :empty
    */
    /* 从来没有被访问过 */
    a:link{
        color: aqua;
    }
    /* 已经被访问过的 */
    a:visited{
        color: rgb(231, 245, 28);
    }
     /* 鼠标放到上边 悬浮 */
     a:hover{
        color: rgb(0, 255, 21);
    }
      /* 鼠标点中 */
      a:active{
        color: rgb(255, 0, 0);
    }
          /* 鼠标聚焦 */
          input:focus{
        color: rgb(255, 0, 212);
        background-color: black;
    }
    /* 
    所有a元素的伪类都是红色
    a{
        color:red;
    }
    */
    /* 使用注意
    口  :hover必须放在:link和:visited后面才能完全生效
    口  :active必须放在:hover后面才能完全生效
    口  所以建议的编写顺序是 :link、:visited、:hover、:active */


    /* 结构伪类 */
    ul li:nth-child(1) {
        color: red;
    }
    ul li:nth-child(4n) {
        color: green;
    }
    /* div > div:nth-child(4n+1) {
        color: orange;
    }
    div > div:nth-child(4n+2) {
        color: purple;
    }
    div > div:nth-child(4n+3) {
        color: red;
    } */
    .nthchild > div:nth-child(4n) {
        color: rgb(0, 255, 34);
    }
   /* 需求: 选邦6ox中的第三个div 元素(除所有的于扰项)
   元素:nth-of-type，只计算符合我元素类型的数量的元素 */

   /* 
   
    其他：
        :first-child  等同于  :nth-child(1)
        :last-child等同于:nth-last-child(1)
        :first-of-type，等同于:nth-of-type(1)
        口:last-of-type，等同于:nth-last-of-type(1)
        口 :only-child，是父元素中唯一的子元素
        口:only-of-type，是父元素中唯一的这种类型的子元素

   */
   /* 下面的伪类偶尔会使用:
        口:root，根元素，就是HTML元素
        口:empty代表里面完全空白的元素 */
    .nthoftype > div:nth-of-type(3){
        color: yellow;
    }

    /* 否定伪类 */
    .fouding :not(.why){
        color: aqua;
    }
</style>
<body>
  
        <a href="http://www.mi.com">小米</a>
        <a href="http://www.baidu.com">百度</a>
        <input type="text">
        <!-- 结构伪类 
        :nth-child(1)
        口 是父元素中的第1个子元素

        :nth-child(2n)
        口 n代表任意正整数和0
        口 是父元素中的第偶数个子元素 (第2、4、6、8.....个)
        口跟:nth-child(even)同义
        
        :nth-child(2n + 1)
        口 n代表任意正整数和0
        口 是父元素中的第奇数个子元素 第1、3、5、7.....个)
        口跟:nth-child(odd)同义

        nth-child(-n + 2)
        口 代表前2个子元素
        -->
        <ul>
            <li>列表元素1</li>
            <li>列表元素2</li>
            <li>列表元素3</li>
            <li>列表元素4</li>
            <li>列表元素5</li>
            <li>列表元素6</li>
        </ul>
        <div>-------nth-child----------</div>
        <div class="nthchild">
            <div>div元素01</div>
            <div>div元素02</div>
            <div>div元素03</div>
            <div>div元素04</div>
            <div>div元素05</div>
            <div>div元素06</div>
            <div>div元素07</div>
            <div>div元素08</div>
            <div>div元素09</div>
            <div>div元素10</div>
            <div>div元素11</div>
            <div>div元素12</div>
            <div>div元素13</div>
            <div>div元素14</div>
            <div>div元素15</div>
            <div>div元素16</div>
            <div>div元素17</div>
            <div>div元素18</div>
            <div>div元素19</div>
            <div>div元素20</div>
        </div>
        <div>-----------nth-of-type-----------------------</div>
        <div class="nthoftype">
            <div>我是列表1</div>
            <p>p元素</p>
            <div>我是列表2</div>
            <span>span元素1</span>
            <span>span元素2</span>
            <span>span元素3</span>
            <span>span元素4</span>
            <div>我是列表3</div>
            <div>我是列表4</div>
            <div>我是列表5</div>
            <div>我是列表6</div>
            <div>我是列表7</div>
            <div>我是列表8</div>
            <div>我是列表9</div>
            <div>我是列表10</div>
        </div>
        <div>------------否定伪类-------------------</div>
      <div class="fouding">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="why">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div>6</div>
        <div>7</div>
      </div>
</body>
</html>